<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>

		<link rel='stylesheet' th:href="@{~/3thExt/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}" href="../../static/3thExt/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link rel='stylesheet' th:href="@{~/3thExt/bootstrap-table/1.12.1/bootstrap-table.min.css}" href="../../static/3thExt/bootstrap-table/1.12.1/bootstrap-table.min.css" />
		<link rel='stylesheet' th:href="@{~/3thExt/select2/4.0.6/css/select2.css}" href="../../static/3thExt/select2/4.0.6/css/select2.css" />
		<link rel='stylesheet' th:href="@{~/3thExt/bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css}" href="../../static/3thExt/bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css" />
		<link rel='stylesheet' th:href="@{~/3thExt/bootstrap-fileinput/4.4.7/css/fileinput.min.css}" href="../../static/3thExt/bootstrap-fileinput/4.4.7/css/fileinput.min.css" />
		<link rel='stylesheet' th:href="@{~/3thExt/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css}" href="../../static/3thExt/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
		<link rel='stylesheet' th:href="@{~/css/icon-zc.css}" href="../../static/css/icon-zc.css" />
		<link rel='stylesheet' th:href="@{~/css/style.css}" href="../../static/css/style.css" />

	</head>

	<body>
		<!--头部-->
		<header th:replace="common/head">
		</header>
		<!-- 页面指向 -->
		<div th:replace="common/title">
		</div>
		<!-- 菜单树 -->
		<div th:replace="common/left">
		</div>
		<!--主体内容-->
		<div class="page-container">

			<div class="container-fluid mb-20 clearfix">
				<div class="col-md-12">
					<h2 class="page-section-title">查询条件</h2>
				</div>
			</div>

			<div class="container-fluid query-frame-wrap mb-10 clearfix">
				<div class="col-lg-9 col-lg-item-6">
					<div class="row">
						<div class="col-lg-4">
							<div class="query-frame">
								<label>设备编号</label>
								<input autocomplete="new-password" class="form-control" type="text" />
							</div>
						</div>
						<div class="col-lg-4">
							<div class="query-frame date-frame">
								<label>开始时间</label>
								<input autocomplete="new-password" class="form-control" type="text" />
							</div>
						</div>
						<div class="col-lg-4">
							<div class="query-frame date-frame">
								<label>结束时间</label>
								<input autocomplete="new-password" class="form-control" type="text" />
							</div>
						</div>
					</div>
				</div>

				<div class="col-lg-3">
					<div class="query-frame query-button">
						<img id="queryTool" th:src="@{/image/search.png}" src="../../static/image/search.png" />
						<img class="reset" th:src="@{/image/rest.png}" src="../../static/image/rest.png" />
					</div>
				</div>
			</div>

			<div class="container-fluid mb-20 clearfix">
				<div class="month-inspection">
					<div class="title-item">
						<img src="../../static/image/icon-985.png"/>
						<strong>月度点检不合格设备TOP10</strong>
					</div>
					<ul>
						<li class="active">EQ001</li>
						<li>EQ001</li>
						<li>EQ001</li>
						<li>EQ001</li>
						<li>EQ001</li>
						<li>EQ001</li>
						<li>EQ001</li>
						<li>EQ001</li>
						<li>EQ001</li>
						<li>EQ001</li>
					</ul>
				</div>
			</div>

			<div class="container-fluid mb-20 clearfix">
				<div class="col-md-12 rlt">
					<h2 class="page-section-title">月度巡检列表</h2>
				</div>
			</div>

			<div class="container-fluid table-container">
				<ul class="inspection-table">
					<li class="active">
						<div class="table-box">
							<div class="is-true"></div>1
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-false"></div>2
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-true"></div>3
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-false"></div>4
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-false"></div>5
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-false"></div>6
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-true"></div>7
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-false"></div>8
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-true"></div>9
						</div>
					</li>
					<li>
						<div class="table-box">
							<div class="is-false"></div>10
						</div>
					</li>

				</ul>
			</div>
		</div>

		<script th:src="@{/3thExt/jquery/3.3.1/jquery-3.3.1.min.js}" src="../../static/3thExt/jquery/3.3.1/jquery-3.3.1.min.js"></script>
		<script th:src="@{/3thExt/jquery-form/3.46/jquery.form.js}" src="../../static/3thExt/jquery-form/3.46/jquery.form.js"></script>
		<script th:src="@{/3thExt/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js}" src="../../static/3thExt/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script th:src="@{/3thExt/bootstrap-table/1.12.1/bootstrap-table.min.js}" src="../../static/3thExt/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
		<script th:src="@{/3thExt/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js}" src="../../static/3thExt/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
		<script th:src="@{/3thExt/select2/4.0.6/js/select2.js}" src="../../static/3thExt/select2/4.0.6/js/select2.full.js"></script>
		<script th:src="@{/3thExt/bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js}" src="../../static/3thExt/bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
		<script th:src="@{/3thExt/bootstrap-fileinput/4.4.7/js/fileinput.min.js}" src="../../static/3thExt/bootstrap-fileinput/4.4.7/js/fileinput.min.js"></script>
		<script th:src="@{/3thExt/bootstrap-fileinput/4.4.7/js/locales/zh.js}" src="../../static/3thExt/bootstrap-fileinput/4.4.7/js/locales/zh.js"></script>
		<script th:src="@{/3thExt/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js}" src="../../static/3thExt/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
		<script th:src="@{/3thExt/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js}" src="../../static/3thExt/bootstrap-datetimepicker/js/bootstrap-datetimepicker.zh-CN.js"></script>
		<script th:src="@{/js/page-interaction.js}" src="../../static/js/common/page-interaction.js"></script>

		<script>
			(function($){
				let _ul = $('.month-inspection').find('ul');

				_ul.on('click', 'li', function(){
					let index = $(this).index();
					let _li =  $('.inspection-table').find('li');

					$(this).addClass('active').siblings().removeClass('active');
					
					_li.eq(index).addClass('active').siblings().removeClass('active');
				})
			}(jQuery))
		</script>
	</body>

</html>